<template>
  <div class="wrapper">
    <header>
      <p class="back" @click="toPerson()">
        <i class="fa fa-angle-left"></i>
      </p>
      <p class="font">我的钱包</p>
    </header>
    <div class="content">
      <div class="user-info">
        <div class="balance-info">
          <div class="balance-title">零钱</div>
          <div class="balance-amount">￥{{ this.balance }}</div>
        </div>
        <div class="buttons">
          <div>
            <button v-show="this.flag === 1" class="debit-btn" @click="showDebitInput()">充值</button>
            <div v-show="this.flag === 0" class="input-container">
              <input type="number" v-model="amount" class="debit-input" placeholder="请输入金额" />
              <button @click="confirm(amount)" class="confirm-btn">确认</button>
            </div>
          </div>
          <button v-show="this.flag === 1" class="withdraw" @click="showWithDrawlInput()">提现</button>
          <div v-show="this.flag === 2" class="input-container">
            <input type="number" v-model="amount" class="debit-input" placeholder="请输入金额" />
            <button @click="withdrwal(amount)" class="confirm-btn">确认</button>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Wallet',
  data() {
    return {
      user: {},
      balance: 0,
      walletId: 0,
      showInput: false,
      amount: null,
      flag: 1,
    }
  },
  created() {
    this.flag = 1;
    this.user = this.$getSessionStorage('user');
    this.$axios.get(`/virtualWallets/users/${this.user.userId}`, {
      params: {
        token: this.$getSessionStorage("token")
      }
    }).then(response => {
      console.log(response.data.balance);
      this.balance = response.data.balance;
      this.walletId = response.data.walletId;
    }).catch(error => {
      console.error(error);
    });
  },
  methods: {
    toPerson() {
      this.$router.push({
        path: '/person',
      })
    },
    showDebitInput() {
      this.flag = 0;
    },
    showWithDrawlInput() {
      this.flag = 2;
    },
    confirm(amount) {
      this.showInput = false; // 隐藏输入框
      this.$axios.put(`/virtualWallets/topUp/${this.walletId}/${amount}?token=${this.$getSessionStorage("token")}`
      ).then(response => {
        if (response.status !== 200) {
          alert("错误");
        } else if (response.status === 200) {
          alert("充值成功！")
          location.reload();
        }
      }).catch(error => {
        console.error(error);
      });
    },
    withdrwal(amount) {
      this.$axios.put(`/virtualWallets/withdrawal/${this.walletId}/${amount}?token=${this.$getSessionStorage("token")}`
      ).then(response => {
        if (response.status !== 200) {
          alert("错误");
        } else if (response.status === 200) {
          alert("提现成功！")
          location.reload();
        }
      }).catch(error => {
        console.error(error);
      });
    },
  },
  components: {
    Footer
  }
}
</script>

<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

/* header部分 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}

.wrapper header .back {
  margin: 0 2vw 0 3vw;
  font-size: 6vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
}

.wrapper header .font {
  font-weight: 545;
}

/* 个人信息部分 */
.content {
  padding-top: 14vw;
  /* 为header留出空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-info {
  width: 90%;
  background-color: white;
  margin-top: 20px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.balance-info {
  text-align: center;
  margin-bottom: 20px;
}

.balance-title {
  font-size: 7vw;
  color: #333;
}

.balance-amount {
  font-size: 7vw;
  color: #333;
  margin-top: 10px;
}

.buttons {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.debit-btn {
  font-size: 17px;
  /* 设置字体大小 */
  padding: 10px 30px;
  /* 调整内边距 */
  width: auto;
  /* 让按钮宽度自适应内容 */
  border-radius: 20px;
  /* 设置边框圆角 */
  border: 1px solid #ccc;
  /* 添加边框 */
  background-color: #ff7f50;
  /* 设置背景颜色 */
  color: white;
  cursor: pointer;
  outline: none;
}

.withdraw {
  background-color: #32cd32;
  font-size: 17px;
  /* 设置字体大小 */
  padding: 10px 30px;
  /* 调整内边距 */
  width: auto;
  /* 让按钮宽度自适应内容 */
  border-radius: 20px;
  /* 设置边框圆角 */
  border: 1px solid #ccc;
  /* 添加边框 */
  /* 设置背景颜色 */
  color: white;
  cursor: pointer;
  outline: none;
}

.debit-input {
  font-size: 15px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 100px;
}

.confirm-btn {
  font-size: 15px;
  background-color: #19ba3e;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 10px;
}

footer {
  margin-top: 20px;
}
</style>